<template>
    <el-dropdown @command="handleCommand" @visible-change="handleVisibleChange">
    <span class="avatar-dropdown">
      <el-avatar :src="avatar" class="user-avatar"/>
      <div class="user-name">
        <span class="hidden-xs-only">{{ username }}</span>
        <vab-icon
            :class="{ 'vab-dropdown-active': active }"
            class="vab-dropdown"
            icon="arrow-down-s-line"
        />
      </div>
    </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="personalCenter">
                    <vab-icon icon="user-line"/>
                    {{ translate('个人中心') }}
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                    <vab-icon icon="logout-circle-r-line"/>
                    {{ translate('退出登录') }}
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script lang="ts">
import LocalStorageUtil from "@/utils/local-storage-util";
import LoginService from "@/views/login/login.service";
import BaseVue from '../../../common/base-vue'
import {UserGetterEnum} from "../../../store/enum/store.enum";
import {Component} from 'vue-property-decorator'

@Component({components: {}})
export default class VabAvatar extends BaseVue {
    private active: boolean;
    private avatar: string;

    get username() {
        return this.$store.getters[UserGetterEnum.userInfo].username;
    };

    private handleCommand(command) {
        switch (command) {
            case 'logout':
                this.logout();
                break;
            case 'personalCenter':
                this.$router.push({name: 'user-center'});
                break;
        }
    };

    private handleVisibleChange(val: boolean) {
        this.active = val;
    };

    private logout() {
        LoginService.loginOut().then(res => {
            if (res.status === 200) {
                LocalStorageUtil.deleteAll();
                setTimeout(() => {
                    window.location.reload();
                }, 300);
            }
            ;
        });
    };

}
</script>

<style lang="scss" scoped>
.avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;

    .user-avatar {
        width: 40px;
        height: 40px;
        margin-left: 15px;
        cursor: pointer;
        border-radius: 50%;
    }

    .user-name {
        position: relative;
        display: flex;
        align-content: center;
        align-items: center;
        height: 40px;
        margin-left: 6px;
        line-height: 40px;
        cursor: pointer;

        [class*='ri-'] {
            margin-left: 0 !important;
        }
    }
}
</style>
